<template>
    <div class="addRelation">
        <el-button
            type="warning"
            size="small"
            icon="el-icon-c-scale-to-original"
            @click="show()"
        >新增关系</el-button>
        <el-dialog title="新增关系" :visible.sync="dialogFormVisible" width="350px">
            <el-form ref="formData" :rules="rules" :model="formData" label-width="80px">
                <el-form-item label="国家" size="small" prop="countryId">
                    <country :form="formData" formId="countryId" addSize="mini" size="small"></country>
                </el-form-item>
                <el-form-item label="产品型号" size="small" prop="productId">
                    <product :form="formData" formId="productId" addSize="mini" size="small"></product>
                </el-form-item>
                <el-form-item label="ASIN" size="small" prop="asin">
                    <el-autocomplete
                        popper-class="my-autocomplete"
                        v-model="formData.asin"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelect"
                    >
                        <i class="el-icon-edit el-input__icon" slot="suffix"></i>
                        <template slot-scope="{ item }">
                            <div class="name">{{ item.asin }}</div>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="SKU" prop="countryId">
                    <el-input v-model="formData.edaYunSku" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="addRelation('formData')"
                    size="small"
                    :icon="Loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                    :disabled="Loading"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import product from "components/searchfor/product.vue";
import country from "components/searchfor/country.vue";
import { ASIN } from "components/searchfor/http.js";
const ERR_OK = 200;
export default {
    components: {
        product,
        country
    },
    data() {
        return {
            dialogFormVisible: false,
            formData: {},
            ASINList: [],
            Loading: false,
            rules: {
                countryId: [
                    { required: true, message: "请选择国家", trigger: "change" }
                ],
                productId: [
                    { required: true, message: "请选择产品", trigger: "change" }
                ],
                asin: [
                    { required: true, message: "请输入asin", trigger: "blur" }
                ],
                edaYunSku: [
                    { required: true, message: "请输入SKU", trigger: "blur" }
                ]
            }
        };
    },
    created() {
        this.getASIN();
    },
    methods: {
        show() {
            this.formData = {
                productId: "",
                asin: "",
                countryId: "",
                edaYunSku: ""
            };
            this.dialogFormVisible = true
        },
        getASIN() {
            ASIN({}).then(res => {
                this.ASINList = res.data.data.Asin;
            });
        },
        querySearch(queryString, cb) {
            var restaurants = this.ASINList;
            var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return restaurant => {
                return (
                    restaurant.asin
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        handleSelect(item) {
            this.formData.asin = item.asin;
        },
        addRelation(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.Loading = true;
                    this.$ajax({
                        method: "post",
                        url:
                            this.GLOBAL.fulfillmentOrderService +
                            "/edaYunAsinSku/addAsinSku",
                        data: this.formData
                    }).then(res => {
                        this.Loading = false;
                        if (res.data.code === ERR_OK) {
                            this.dialogFormVisible = false;
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="stylus" scoped>
.addRelation {
    display: inline-block;
}
</style>